<template>
  <view class="wrapper">
    <van-nav-bar :title="userStore.getConfig?.gold_name" left-arrow @click-left="onClickLeft" />
    <view class="content">
      <view class="bgc">
        <view class="bgc_a">
          <image src="/src/static/images/avatar.png" />
          <text>{{ userInfo.level }}&nbsp;&nbsp;{{ userInfo.mobile }}</text>
        </view>
        <view class="bgc_b">
          <view class="balance">
            <view class="bal_a">{{ userInfo.gold }}</view>
            <view class="bal_b">我的{{ userStore.getConfig?.gold_name }}</view>
          </view>
        </view>
      </view>
      <view class="record">
        <view class="tle">{{ userStore.getConfig?.gold_name }}收支记录</view>
        <view class="list-con">
          <scroll-view class="detail_box" scroll-y="true">
            <view style="width: 96.5%">
              <view class="list" v-for="item in scrollList" :key="item.id">
                <view class="left">
                  <view class="describe">{{ item.name }}</view>
                  <view class="time">{{ item.time }}</view>
                </view>
                <view class="right col">{{ item.money }}</view>
              </view>
            </view>
          </scroll-view>
        </view>
        <Empty v-if="scrollList.length" />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { useUserStore } from '/@/store/modules/user';
  import { getUserInfoApi } from '@/api/index';
  import { onShow } from '@dcloudio/uni-app';

  const userStore = useUserStore();
  const userInfo = ref<any>({});
  const scrollList = ref([
    { id: 1, name: '购买 盲盒福袋 抵扣', time: '2023-10-19 11:46:24', money: '-120.00' },
    { id: 2, name: '购买 盲盒福袋 抵扣', time: '2023-10-19 11:45:54', money: '-120.00' },
    { id: 3, name: '购买 盲盒福袋 抵扣', time: '2023-10-19 11:45:42', money: '-12.00' },
    { id: 4, name: '购买 盲盒福袋 抵扣', time: '2023-10-19 11:45:24', money: '-12.00' },
    { id: 5, name: '购买 盲盒福袋 抵扣', time: '2023-10-19 11:25:03', money: '-36.00' },
    { id: 6, name: '购买 Iphone 抵扣', time: '2023-10-19 11:23:06', money: '-990.00' },
    { id: 7, name: '购买 盲盒福袋 抵扣', time: '2023-10-19 11:22:49', money: '-36.00' },
  ]);
  const onClickLeft = () => history.back();
  onShow(() => {
    getUserInfoApi().then((res) => {
      userInfo.value = {
        ...res,
        mobile: res.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'),
      };
    });
  });
  // function navigateTo(url) {
  //   uni.navigateTo({
  //     url,
  //   });
  // }
</script>
<style lang="scss" scoped>
  .wrapper {
    overflow: hidden;
    height: 100%;
    background-color: #fff;
    :deep(.van-nav-bar .van-icon) {
      color: #000;
      font-size: 20px;
    }
    .content {
      padding: 0 4%;
      height: 100%;
      .bgc {
        margin-top: 10px;
        width: 100%;
        height: 150px;
        background: url('/src/static/images/bgc1.f571e0e2.png') no-repeat;
        background-size: cover;
        border-radius: 3px;
        &_a {
          padding: 17px 19px 0;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          image {
            width: 31px;
            height: 31px;
            border-radius: 50%;
          }
          text {
            margin-left: 7px;
            font-size: 15px;
            color: #fff;
          }
        }
        &_b {
          position: relative;
          margin-top: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .balance {
            margin-left: 19px;
            .bal_a {
              margin-bottom: 5px;
              font-size: 23px;
              font-weight: 600;
              color: #fff;
            }
            .bal_b {
              font-size: 13px;
              color: #fff;
            }
          }
          .gusse {
            position: absolute;
            width: 80px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            font-size: 15px;
            font-weight: 600;
            color: #ffb526;
            background: #fff;
            border-radius: 18px 0 0 18px;
            top: -45px;
            right: 0px;
          }
          .recharge {
            width: 80px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            font-size: 15px;
            font-weight: 600;
            color: #ffb526;
            background: #fff;
            border-radius: 18px 0 0 18px;
          }
        }
      }
      .record {
        height: calc(100% - 160px);
        .tle {
          padding-top: 16px;
          font-size: 16px;
          font-weight: 600;
          color: #323232;
        }
        .list-con {
          height: calc(100% - 32px);
          .detail_box {
            height: 100%;
            .list {
              padding: 19px 0 15px;
              border-bottom: 1px solid #eee;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .left {
                .describe {
                  font-size: 14px;
                  color: #323232;
                  margin-bottom: 7px;
                }
                .time {
                  font-size: 11px;
                  color: #9d9d9d;
                }
              }
              .right {
                font-size: 19px;
                font-weight: 600;
                color: #ed5225;
              }
              .col {
                color: #999;
              }
            }
          }
        }
      }
    }
  }
</style>
